<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0 auto;
        list-style: none;
        outline: none;
    }
    div{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    ul{
        width: 200px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    ul li{
        width: 40px;
        height: 40px;
    }
    ul li button{
        width: 40px;
        height: 40px;
    }
</style>
<body>
<!-- 写一个计算器 -->
<!-- <input type="text" value="" id="a1" placeholder="请输入数字0~9">
<select id="a2">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
    <option value="%">%</option>
</select>

<input type="text" value="" id="a3" placeholder="请输入数字0~9">
<button id="a4"></button>
<input type="text" value="" id="a5" placeholder="结果">

<script>
    console.log(Number('+'));
    var a1 = document.querySelector('#a1');
    var a2 = document.querySelector("#a2");
    var a3 = document.querySelector("#a3");
    var a4 = document.querySelector("#a4");
    var a5 = document.querySelector("#a5");

    a4.onclick = function () {
        var a = Number(a1.value);
        var b = a2.value;
        var c = Number(a3.value);
        var d = 0;
        switch (b) {
            case "+":
                d = a + c;
                break;
            case "-":
                d = a - c;
                break;
            case "*":
                d = a * c;
                break;
            case "/":
                d = a / c;
            case "%":
                d = a % c;
                break;
        }
        a5.value = d;
    }
    
</script> -->

<!-- asdfffff fsafasdfasdfsadgfffffffffffffffffffff -->

<div>
    <input type="text" value="" id="he" placeholder="结果">
    <ul>
        <li><button id="b1" value="1">1</button></li>
        <li><button id="b2" value="2">2</button></li>
        <li><button id="b3" value="3">3</button></li>
        <li><button id="b4" value="4">4</button></li>
        <li><button id="b5" value="5">5</button></li>
        <li><button id="b6" value="6">6</button></li>
        <li><button id="b7" value="7">7</button></li>
        <li><button id="b8" value="8">8</button></li>
        <li><button id="b9" value="9">9</button></li>
        <li><button id="b10" value="0">0</button></li>
        <li><button id="b11" value="=">=</button></li>
        <li><button id="b12" value="+">+</button></li>
        <li><button id="b13" value="-">-</button></li>
        <li><button id="b14" value="*">*</button></li>
        <li><button id="b15" value="/">/</button></li>
        <li><button id="b16" value="pf">平方</button></li>
        <li><button id="b17" value="kpf">开平方</button></li>
    </ul>
</div>


<script>
    var he = document.querySelector('#he');
    // var b = document.querySelector('#b');
    var b1 = document.querySelector('#b1');
    var b2 = document.querySelector('#b2');
    var b3 = document.querySelector('#b3');
    var b4 = document.querySelector('#b4');
    var b5 = document.querySelector('#b5');
    var b6 = document.querySelector('#b6');
    var b7 = document.querySelector('#b7');
    var b8 = document.querySelector('#b8');
    var b9 = document.querySelector('#b9');
    var b10 = document.querySelector('#b10');
    var b11 = document.querySelector('#b11');
    var b12 = document.querySelector('#b12');
    var b13 = document.querySelector('#b13');
    var b14 = document.querySelector('#b14');
    var b15 = document.querySelector('#b15');
    var b16 = document.querySelector('#b16');
    var b17 = document.querySelector('#b17');

    var aa,bb,cc;
    var b11,b22,b33,b44,b55;
    // b.onclick = function () {
    //     var b11 = b1.value;
    //     var b22 = b2.value;
    //     var b33 = b3.value;
    //     var b44 = b4.value;
    //     var b55 = b5.value;
    // he.value = b11 + b22 + b33 + b44 + b55;
    // }

</script>



</body>
</html>
